import { defineStore } from 'pinia'
import {
  loginRequest,
  getUserInfoRequest,
  getUserListRequest,
  getUserMenuById,
} from '@/service/login/login.ts'
import type { LoginInfo } from '@/utils/types.ts'
import { localCache } from '@/utils/cache.ts'
import router from '@/router'
import type { RouteRecordRaw } from 'vue-router'
import SubMenu from 'element-plus/es/components/menu/src/utils/submenu.mjs'
const routes: RouteRecordRaw[] = []

const SvgRouters: RouteRecordRaw[] = [
  {
    path: '/main/analysis/overview', // 路由地址 自定义
    component: () => import('@/views/Main/analysis/overview/overview.vue'), // 实际跳转地址 对应views 下的 main【自定义】文件夹下的 xxx 文件夹和文件
  },
  {
    path: '/main/analysis/dashboard',
    component: () => import('@/views/Main/analysis/dashboard/dashboard.vue'),
  },
  {
    path: '/main/product/goods',
    component: () => import('@/views/Main/product/goods/goods.vue'),
  },
  {
    path: '/main/product/category',
    component: () => import('@/views/Main/product/category/category.vue'),
  },
  {
    path: '/main/story/chat',
    component: () => import('@/views/Main/story/chat/chat.vue'),
  },
  {
    path: '/main/story/list',
    component: () => import('@/views/Main/story/list/list.vue'),
  },
  {
    path: '/main/system/user',
    component: () => import('@/views/Main/system/user/user.vue'),
  },
  {
    path: '/main/system/role',
    component: () => import('@/views/Main/system/role/role.vue'),
  },
  {
    path: '/main/system/menu',
    component: () => import('@/views/Main/system/menu/menu.vue'),
  },
  {
    path: '/main/system/detpartment',
    component: () => import('@/views/Main/system/department/department.vue'),
  },
]

// 方式一： 页面获取数据 来调这个方法 保存状态
const useLoginStore = defineStore('login', {
  state: () => ({
    id: localCache.getCache('id') ?? -1,
    name: localCache.getCache('name') ?? '',
    token: localCache.getCache('token') ?? '',
    userInfo: localCache.getCache('userInfo') ?? {},
    userMenus: localCache.getCache('userMenus') ?? {},
  }),

  // 其他地方 可以直接使用    const loginStorage = useLoginStore()  loginStorage.getLoginInfo.id 来获取对应值
  getters: {
    getLoginInfo(state) {
      return state
    },
  },

  // 方式二 直接使用这个action
  // 仅仅保存这里 还不行 只要一刷新就没有值了
  //  async  和 await 不需要写then了

  actions: {
    async UserLoginAction(userLoginData: LoginInfo) {
      const formData = new FormData()
      formData.append('user_name', userLoginData.user_name)
      formData.append('password', userLoginData.password)

      const loginRes = await loginRequest(formData)

      console.log('pinal = =====222====')
      console.log(loginRes)

      this.id = loginRes.data.id
      this.name = loginRes.data.name
      this.token = loginRes.data.token

      // 缓存到本地
      // localStorage.setItem('token', loginRes.data.token)
      localCache.setCache('token', loginRes.data.token)
      localCache.setCache('id', loginRes.data.id)
      localCache.setCache('name', loginRes.data.name)

      // 立刻去获取用户信息
      const loginInfoRes = await getUserInfoRequest(this.id)
      // const loginInfoRes = await getUserListRequest(1)

      console.log('=====loginInfoRes====')
      console.log(loginInfoRes)
      this.userInfo = loginInfoRes.data

      localCache.setCache('userInfo', loginInfoRes.data) // 保存个人信息

      console.log('=====用户角色====')
      console.log(loginInfoRes.data.role.id)
      // 根据用户角色 获取用户权限（菜单）
      const userMenuRes = await getUserMenuById(this.userInfo.role.id)
      this.userMenus = userMenuRes.data

      console.log('=====用户菜单====')
      console.log(userMenuRes.data)
      localCache.setCache('userMenus', userMenuRes.data) // 这里的菜单也需要 在刷新的时候用到，【路由保持】

      // 遍历注册服务器路和页面 【但是 一旦刷新页面就没有路由了，因为 这里只是在登陆后才有效】
      // for (const menu of userMenuRes.data) {
      //   for (const subMenu of menu.children) {
      //     const route = SvgRouters.find((item) => item.path === subMenu.url)
      //     if (route) {
      //       router.addRoute('main', route)
      //     }
      //   }
      // }
      this.mapMenusToRouter(userMenuRes.data)

      // 登陆成功 可以直接在这里跳转到main主页面中
      router.push('./main')
    },

    // 全局记录第一个菜单
    mapMenusToRouter(userMenus: any[]) {
      for (const menu of userMenus) {
        for (const subMenu of menu.children) {
          const route = SvgRouters.find((item) => item.path === subMenu.url)
          if (route) {
            // 点击一级 重定向到子集的第一个
            if (!SvgRouters.find((item) => item.path === menu.url)) {
              // routes.push({ path: menu.url, redirect: route }) //
              router.addRoute({ path: menu.url, redirect: route.path }) //
            }

            router.addRoute('main', route) // 这里的 main 是指向 router中的name
            if (!firstMenu && route) firstMenu = subMenu // 记录第一个菜单 为什么直接放 subMenu  因为在main-menu中需要用到活跃菜单，因为这里跳了，活跃菜单还没跳呢
          }
        }
      }
    },

    // 判断用户是否登陆 重新载入菜单[刷新用 在主main 中调用]
    locaCacheAction() {
      let token = localCache.getCache('token')
      let userMenus = localCache.getCache('userMenus')
      let userInfo = localCache.getCache('userInfo')
      if (token && userMenus && userInfo) {
        this.mapMenusToRouter(userMenus)
      }
    },
  },
})

export let firstMenu: any = null

export default useLoginStore
